const path = require("path");
// 引入压缩js文件的插件
const uglify = require("uglifyjs-webpack-plugin");
// 引入html-webpack-plugin
const htmlPlugin = require("html-webpack-plugin");
// 引入单独分离css文件的插件
// const extractTextPlugin = require("extract-text-webpack-plugin");
// const miniExtracPlugin = require("mini-css-extract-plugin");
module.exports = {
  // 入口文件,可以是单一入口，也可以是多入口
  entry: {
    entry: "./src/entery.js",
  },
  // 出口文件
  output: {
    // 打包文件的路径
    path: path.resolve(__dirname, "dist"),
    // 打包文件名
    filename: "boundle.js",
    // 也可这样写 filename:'[name].js',表示文件名陈按原来的名称输出
  },
  // 模块：例如解读CSS,图片如何转换，压缩
  module: {
    rules: [
      // 第一种写法
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      //   第二种写法
      // {
      //     test: /\.css$/,
      //     loader: ["style-loader", "css-loader"],
      // },
      // 第三种写法
      //   {
      //     test: /\.css$/,
      //     use: [
      //       {
      //         loader: "style-loader",
      //       },
      //       {
      //         loader: "css-loader",
      //       },
      //     ],
      //   },
      // 解析图片
      {
        // 匹配图片文件后缀名称
        test: /\.(jpg|png|gif|jpeg)$/,
        use: [{
          loader: "url-loader",
          options: {
            // 是把小于500000B的文件打成Base64的格式，写入JS
            // 1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；
            // 2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。
            limit: 5000,
            outputPath: 'images/',
            name: '[name].jpg',
            esModule: false
          },
        }, ],
      },
      {
        test: /\.(htm|html)$/,
        use: ["html-withimg-loader"]
      },
      {
        test: /\.less$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
          }, {
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "less-loader" // compiles Less to CSS
          }
        ]
      }
    ],
  },
  // 插件，用于生产模版和各项功能
  plugins: [
    new uglify(),
    new htmlPlugin({
      // minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
      minify: {
        removeAttributeQuotes: true,
      },
      // hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
      hash: true,
      // Template：是要打包的html模版路径和文件名称。
      template: "./src/index.html",
    }),
    // 这里的/css/index.css是分离后的路径位置
    // 这里需要注意的是Webpack 4.x已经不再支持extract-text-webpack-plugin
    // 解决方法：1、使用extract-text-webpack-plugin@next； 2、使用mini-css-extract-plugin代替
    // new extractTextPlugin("css/index.css"),
    // new miniExtracPlugin({
    //   filename: "[name].css",
    // }),
  ],
  // 配置webpack开发服务功能
  devServer: {
    //设置基本目录结构
    contentBase: path.resolve(__dirname, "dist"),
    //服务器的IP地址，可以使用IP也可以使用localhost
    host: "localhost",
    //服务端压缩是否开启
    compress: true,
    //配置服务端口号
    port: 1717,
  },
  mode: "development",
};